body{
	  background-image: url('../images/bg01.png');
	   background-repeat: no-repeat;
	   height: 100%;
	   width: 100%;
	   color: #ffffff;
}
#main{
	  height: 100%;
	  width: 100%;
	  margin: 0;
	  padding: 0%;
	  
}
#top{
	    display: -webkit-inline-box;
		height: 50px;
		width: 100%;
		margin: 0;
		padding: 0%;
}
.top-left {
	    height: 65px;
	    width: 25%;
	    background-image: url('../images/top-left.png');
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
		margin: 0;
		padding: 0%;
	}   
.navigation{
	    height: 100%;
		width: 100%;
		display: -webkit-inline-box;
}
.control-box,.information-box{
		height: 40px;
		width: 30%;
		margin: 0% 0% 5% 10%;
	    background-image: url('../images/box.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;
		line-height: 1px;
		font-size: 120%;
		text-shadow: 0 0 .3rem #00d8ff;
}
.top-center{
	    height: 50px;
	    width: 50%;
		/* display: -webkit-inline-box; */
		margin: 0;
		padding: 0%;
}
.top-title{
	   color: #ffffff;
	   width: 100%;
	   height: 50px;
	   font-size: 240%;
	   text-shadow: 0 0 .3rem #00d8ff;
	   text-align: center;
	   margin-top: 0px;
	   line-height: 1px;
}
.top-gif{   
		background: url(../images/head.gif);
		height: 82px;
		width: 50%;
		position: absolute;
		background-repeat: no-repeat;
		background-size: 100% 200%;
		margin: 0;
		padding: 0%;
}
.top-right{
	    height: 65px;
	    width: 25%;
		background-image: url('../images/top-right.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 0%;
}
#time{ 
	   width: 100%;
	   height: 100%;
	   text-align: center;
	   color: #ffffff;
	   font-size: 25px;
	   font-family: 'Times New Roman', Times, serif;
	   text-shadow: 0 0 .3rem #00d8ff;
	   }
#line{
	    margin-top: 20px;
		height: 20px;
		width: 100%;
		background-image: url('../images/line.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
#center{
	    display: -webkit-inline-box;
	    height: 350px;
	    width: 100%;
}
#bottom{
	    display: -webkit-inline-box;
	    height: 300px;
	    width: 100%;

}
.center-left {
	    margin-left: 2%;
		margin-top:4%;
	    height: 75%;
		width: 25%;
	    background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
.center-right {
	    
		margin-top:4%;
	    height: 75%;
		width: 25%;
	    background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
.bottom-right{
	    margin-left: 2%;
	    height: 380px;
		width: 25%;
	    background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
.bottom-left{
	    margin-left: 2%;
	    height: 380px;
		width: 25%;
	    background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
.center-center-titlebox{
	    width: 60%;
		height: 12%;
		background-image: url('../images/title.png');
		background-size: 100% 100%;
		margin-left: 20%;
		display: -webkit-inline-box;
}
.center-left-titlebox,.center-right-titlebox,
.bottom-center-titlebox{
	    width: 60%;
		height: 15%;
		background-image: url('../images/title.png');
		background-size: 100% 100%;
		margin-left: 20%;
		display: -webkit-inline-box;
}
.bottom-left-titlebox,.bottom-right-titlebox{
	    width: 60%;
		height: 12%;
		background-image: url('../images/title.png');
		background-size: 100% 100%;
		margin-left: 20%;
		display: -webkit-inline-box;
}
.center-left-title,.center-center-title,
.center-right-title,.bottom-left-title,
.bottom-center-title,.bottom-right-title{
	    width: 100%;
		height: 100%;
		text-align: center;
		color: #ffffff;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		text-shadow: 0 0 .3rem #00d8ff;
		font-size: 120%;
		line-height: 1px;
}
.center-center{
	    margin-left: 2%;
		margin-right: 2%;
		height:100%;
		width: 42%;
		background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: 1%;
}
.bottom-center{
	    margin-left: 5.5%;
		margin-top: 2.5%;
		margin-right: 3.5%;
		height:100%;
		width: 35%;
		background-image: url('../images/cheek1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
}
.pricebox{
		height: 90%;
		width: 90%;
		margin-left: 3%;
}
.pricep{
		height: 90%;
		width: 100%;
}
.pig-first,.pig-second,.pig-third{
        height: 15%;
		width: 100%;
		display: -webkit-inline-box;
		margin-left: 10%;
		margin-top: 2%;
		
}
.picturetext{
	    height: 100%;
		width: 30%;
}
.pigprice{
		height: 100%;
		width: 25%;
		font-size: 180%;
		line-height: 1px;
		text-align: center;
}
.unit{
		height: 100%;
		width: 20%;
}
.trend{
		height: 80%;
		width: 20%;
		font-size: 110%;
		
}
.pricetext{
		height: 8%;
		width: 100%;
		font-size: 120%;
		text-align: center;
		line-height: 1px;
		text-shadow: 0 0 .3rem #00d8ff;
}
.data{
	    height: 85%;
		width: 100%;
}
a{
		text-decoration:none
}
.weather{
	    height: 100%;
		width: 100%;
		margin-left: 13%;
}
.chart1box{
		width: 100%;
		height: 100%;
}
.chartcss{
		width: 100%;
		height: 83%;
}
.warn{
	    margin:5% 5% 5% 8% ;
		height: 80%;
		width: 100%;
}
.warnbox{
		height: 80%;
		width: 80%;
		text-align: left;
		text-shadow: 0 0 .3rem #00d8ff;
		word-wrap:break-word
}
.first,.second,.third{
	    height: 25%;
		width: 100%;
		margin-top: 1%;
}
.first-left,.first-right,
.second-left,.second-right,
.third-left,.third-right{
		height: 90%;
		width: 41%;
		display: -webkit-inline-box;
		background-image: url('../images/datebg.png');
		background-size: 100% 100% ;
		background-repeat: no-repeat;
		margin-top: 3%;
		margin-left: 5.5%;
}
.temperature-picture{
	    background-image: url("../images/temperature.png");
		height: 100%;
		width: 30%;
		background-size: 80% 80%;
		background-repeat: no-repeat;
		margin-left: 5%;
		margin-top: 2.5%;
}
.water-picture{
	    background-image: url("../images/water.png");
		height: 100%;
		width: 30%;
		background-size: 88% 90%;
		background-repeat: no-repeat;
		margin-left: 5%;
		margin-top: 2.5%;
}
.CH4-picture{
	    background-image: url("../images/TVOC.png");
	    height: 100%;
	    width: 30%;
	    background-size: 80% 80%;
	    background-repeat: no-repeat;
	    margin-left: 5%;
	    margin-top: 2.5%;
}
.CO2-picture{
	    background-image: url("../images/CO2.png");
	    height: 100%;
	    width: 30%;
	    background-size: 78% 78%;
	    background-repeat: no-repeat;
	    margin-left: 6%;
	    margin-top: 2.5%;
}
.H2S-picture{
		background-image: url("../images/Light.png");
		height: 100%;
		width: 30%;
		background-size: 80% 80%;
		background-repeat: no-repeat;
		margin-left: 5%;
		margin-top: 2.5%;
}
.NH3-picture{
		background-image: url("../images/NH3.png");
		height: 100%;
		width: 30%;
		background-size: 80% 80%;
		background-repeat: no-repeat;
		margin-left: 5%;
		margin-top: 2.5%;
}
.temperature,.water,.CH4,.CO2,.H2S,.NH3{
	    height: 100%;
		width: 60%;
		font-size: 120%;
		text-align: right;
		line-height: 1%;
		font-family: 'Times New Roman', Times, serif;
		
}
.chinese{
	font-size: 55%;
	line-height: 1px;
	text-shadow: 0 0 .3rem #00d8ff;
}
.ring{
	width: 140%;
	height: 95%;
}